<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import wlsUpload from '@/components/common/wls-upload.vue'
const route = useRoute();
const router = useRouter();
const totalElements = ref(0);
const pageNum = ref(1);
const currentPage = ref(1);

const handleSizeChange = (val) => {
    pageNum.value = val;
};

const del = () => {
    ElMessageBox.confirm(
        '永久删除该文件. 是否继续?',
        '删除文件',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}

</script>
<template>
    <div class="wls-details">
        <!-- 标题 B-->
        <div class="wls-details-title">
            <div class="wls-details-title-txt">
                <span>{{ route.query.name }}</span>
                <span class="icon iconfont icon-xiala"></span>
                <span>上传记录</span>
            </div>
            <div style="display: flex; align-items: center;">
                <div style="margin-right: 0.24rem;cursor: pointer;">
                    <svg class="wls-icon" aria-hidden="true">
                        <use xlink:href="#icon-shangchuan"></use>
                    </svg>
                    <span style="margin-left: 0.08rem;">上传</span>
                </div>
                <el-button @click.stop="router.go(-1)">返回</el-button>
            </div>
        </div>
        <!-- 标题 E-->

        <div class="wls-details-container">
            <div style="width: 100%;height: 100%;padding: 0.24rem;" class="bcb">
                <table>
                    <thead>
                        <tr style="border: none;">
                            <th>上传时间</th>
                            <th>上传时长 </th>
                            <th>照片数量(张)</th>
                            <th>上传情况 </th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in 10">
                            <td>2023.09.20 15:30:20</td>
                            <td>00:30:00 </td>
                            <td>2567</td>
                            <td> <span>成功:123685</span>&nbsp;&nbsp;<span>失败:12589</span></td>
                            <td><span style="color:#F84848;" @click.stop="del">删除</span></td>
                        </tr>
                    </tbody>
                </table>
                <el-pagination v-model:current-page="currentPage" :page-size="6" :small="true" :disabled="false" background
                    layout="total, prev, pager, next, jumper" :total="totalElements" @size-change="handleSizeChange" />
            </div>
        </div>
        <wlsUpload v-if="false" />
    </div>
</template>
<style scoped>
.wls-details {
    width: 100%;
    height: 100%;
    padding: .06rem;
    background-color: #F5F7FA;
    overflow: hidden;
}

.wls-details-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .1rem .1rem 0 .1rem;
    margin-bottom: 0.06rem;
}

.wls-details-title-txt {
    display: flex;
    align-items: center;
    color: #AAA;
}


.wls-details-title-txt>span:nth-child(2) {
    transform: rotate(-90deg);
    margin: 0 0.08rem;
}

.wls-details-title-txt>span:nth-child(3) {
    color: #333;
    font-weight: 700;
}

.wls-details-container {
    width: 100%;
    height: calc(100% - .5rem);
    padding: 0.1rem;
    display: flex;
}

th,
td {
    width: 20%;
}
</style>